<section>
	
	<div class="help-content">
		<h3 class="info-title smaller" data-id="#pages/search">Search Results</h3>
		<!-- #section:pages/search -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				Search result page consists of familiar elements and plugins.
			</li>
			<li>
				For more info please see:
				<br />
				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/</span>search/style_1.mustache</code>
				</br >
				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/</span>search/style_2.mustache</code>
			</li>
			
			<li>
				<!-- #section:pages/search.well -->
				A <code>.search-area</code> element is a <code>.well</code> that contains different elements such as pagination, search fields, etc:

<pre data-language="html">
<div class="search-area well well-sm">
 <div class="search-filter-header bg-primary">
    Refine your Search
 </div>

 <div class="search-filter-element">
    <span>within</span>&nbsp; <div id="slider-range" class="inline"></div> &nbsp;<span>miles</span>
 </div>
</div>
</pre>

			Some of the new classes are <code>.search-filter-header</code> and <code>.search-filter-element</code>
	
				<!-- /section:pages/search.well -->
			</li>
			
			<li>
				<!-- #section:pages/search.thumb -->
				Thumbnails are bootstrap <code>.thumbnail</code> elements with <code>.search-thumbnail</code> class name:
<pre data-language="html">
<div class="thumbnail search-thumbnail">
  <span class="search-promotion label label-success arrowed-in arrowed-in-right">Sponsored</span>
  <img class="media-object" src="image.jpg" />
  <div class="caption">
    <h3 class="search-title"><a href="#" class="blue">title</a></h3>
    <p>content</p>
  </div>
</div>
</pre>	
				<!-- /section:pages/search.thumb -->
			</li>
			
			<li>
				<!-- #section:pages/search.media -->
				Search rows are bootstrap <code>.media</code> elements with <code>.search-media</code> class name:
<pre data-language="html">
<div class="media search-media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="image.jpg" />
    </a>
  </div>
  <div class="media-body">
    <div>
       <h4 class="media-heading"><a href="#" class="blue">title</a></h4>
    </div>
    <p>content</p>
  </div>
</div>
</pre>

			  <!-- #section:pages/search.media.-buttons -->
              Optional buttons and info:
<pre data-language="html">
<div class="search-actions text-center">
  <span class="text-info">$119</span> monthly
  <div class="action-buttons">
    <a href="#"><i class="ace-icon fa fa-phone green"></i></a>
    <a href="#"><i class="ace-icon fa fa-heart red"></i></a>
    <a href="#"><i class="ace-icon fa fa-star orange2"></i></a>
  </div>
  <a class="search-btn-action btn btn-sm btn-block btn-info">Book it!</a>
</div>
</pre>
				<!-- /section:pages/search.media.buttons -->

				<!-- /section:pages/search.media -->
			</li>
			
			
			<li>

<!-- #section:pages/search.results -->
<pre data-language="html">
<div class="search-results">

  <div class="search-result">
    <h5 class="search-title"><a href="#">title 1</a></h5>
    <a class="text-success" href="#">info 1</a>
    <p class="search-content">
       content 1
    </p>
  </div>

</div>
</pre>
<!-- /section:pages/search.results -->
			</li>
		 </ul>
		</div>
		<!-- /section:pages/search -->
	</div>
	
</section>